<template>
    <div>
        <div class="crumbs">
            <el-breadcrumb separator="/">
                <el-breadcrumb-item>
                    <i class="el-icon-lx-cascades"></i> 基础表格
                </el-breadcrumb-item>
            </el-breadcrumb>
        </div>
        <div class="container">
            <el-form :model="form" :rules="rules" ref="ruleForm" label-width="80px">
                <el-form-item label="分类" prop="cid">
                    <el-select v-model="form.cid" placeholder="请选择分类">
                        <el-option label="分类1" value="1"></el-option>
                        <el-option label="分类2" value="2"></el-option>
                    </el-select>
                </el-form-item>
                <el-form-item label="文章标题" prop="title">
                    <el-input v-model="form.title"></el-input>
                </el-form-item>
                <el-form-item label="封面图">


                    <el-upload
                            action="#"
                            list-type="picture-card"
                            :action="`/common/upload`"
                            :auto-upload="true"
                            :headers="{authorization:blogToken}"
                            :multiple="false"
                            :limit="1"
                            :on-change="uploadChange"
                    >
                        <i slot="default" class="el-icon-plus"></i>
                        <div slot="file" slot-scope="{file}">
                            <img class="el-upload-list__item-thumbnail" :src="form.cover" alt="">
                            <span class="el-upload-list__item-actions">
                                <span class="el-upload-list__item-preview" @click="handlePictureCardPreview(file)"><i
                                        class="el-icon-zoom-in"></i></span>
        <span v-if="!disabled" class="el-upload-list__item-delete" @click="handleRemove(file)"><i
                class="el-icon-delete"></i></span>
                            </span>
                        </div>
                    </el-upload>
                    <el-dialog :visible.sync="dialogVisible">
                        <img width="100%" :src="dialogImageUrl" alt="">
                    </el-dialog>


                </el-form-item>
                <el-form-item label="作者" prop="author">
                    <el-input v-model="form.author"></el-input>
                </el-form-item>
                <el-form-item label="点赞数">
                    <el-input v-model="form.hits"></el-input>
                </el-form-item>
                <el-form-item label="来源" prop="copyfrom">
                    <el-input v-model="form.copyfrom"></el-input>
                </el-form-item>
                <el-form-item label="内容" prop="content">
                    <mavon-editor v-model="form.content" ref="md" @imgAdd="$imgAdd" @change="change"
                                  style="min-height: 600px"/>
                </el-form-item>

                <el-form-item>
                    <el-button type="primary" @click="submitForm('ruleForm')">提交</el-button>
                    <el-button @click="resetForm('ruleForm')">取消</el-button>
                </el-form-item>
            </el-form>
        </div>

    </div>
</template>

<script>
    import { mavonEditor } from 'mavon-editor';
    import 'mavon-editor/dist/css/index.css';

    export default {
        name: 'add',
        components: {
            mavonEditor
        },
        data() {
            return {
                blogToken: localStorage.getItem('blogToken'),
                /* 上传图片 t */
                dialogImageUrl: '',
                dialogVisible: false,
                disabled: false,
                /* 上传图片 e */

                configs: {},
                form: {
                    cid: '',
                    title: '',
                    cover: '',
                    author: '',
                    hits: '',
                    copyfrom: '',
                    content: '',
                    content_html: ''
                },
                rules: {
                    cid: [
                        { required: true, message: '请选择分类', trigger: 'blur' }
                    ],
                    title: [
                        { required: true, message: '请输入文章标题', trigger: 'blur' }
                    ],
                    author: [
                        { required: true, message: '请填写作者', trigger: 'blur' }
                    ],
                    copyfrom: [
                        { required: true, message: '请填写来源', trigger: 'blur' }
                    ],
                    content: [
                        { required: true, message: '请填写内容', trigger: 'blur' }
                    ]
                }
            };
        },
        created() {
        },
        methods: {
            /*上传图片 t*/
            uploadChange(file, fileList){
                if(file.response){
                    this.form.cover = file.response.data;
                }
            },
            handleRemove(file) {
                //console.log(file);
                this.form.cover = '';
                file.response.data = '';
            },
            handlePictureCardPreview(file) {
                this.dialogImageUrl = file.url;
                this.dialogVisible = true;
            },
            /*上传图片 e*/

            // 将图片上传到服务器，返回地址替换到md中
            $imgAdd(pos, $file) {
                var formdata = new FormData();
                formdata.append('file', $file);
                this.$axios({
                    url: '/common/upload',
                    method: 'post',
                    data: formdata,
                    headers: { 'Content-Type': 'multipart/form-data' }
                }).then((url) => {
                    this.$refs.md.$img2Url(pos, url.data);
                });
            },
            change(value, render) {
                // render 为 markdown 解析后的结果
                this.form.content_html = render;
            },
            submitForm(formName) {
                this.$refs[formName].validate((valid) => {
                    if (valid) {
                        this.$axios.post('/manage/articleAdd',{
                            ...this.form
                        }).then(res=>{
                            this.$message({
                                message: '恭喜你，添加成功',
                                type: 'success'
                            });
                            this.$refs[formName].resetFields();
                        })
                    } else {
                        return false;
                    }
                });
            },
            resetForm(formName) {
                this.$refs[formName].resetFields();
            }
        }
    };
</script>
